<template>
  <div>
    <div id="line"></div>
  </div>
</template>

<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

  import { Line } from '@antv/g2plot'
  export default {
    name: 'G2Demo',
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    props: {
      value: {
        type: Array,
        default: Array,
      },
    },
    // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
    mounted() {
      fetch(
        'https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json'
      )
        .then((res) => res.json())
        .then((data) => {
          const line = new Line('line', {
            data: data,
            padding: 'auto',
            xField: 'Date',
            yField: 'scales',
            xAxis: {
              tickCount: 5,
            },
            slider: {
              start: 0.1,
              end: 0.5,
            },
          })

          line.render()
        })
    },
  }
</script>
